<template>
  <GwContent>
    <GwTitle>组件：图钉</GwTitle>
    <UiSection>
      <UiAffix target=".layout-body .el-scrollbar__wrap" :target-duration="300" :offset-top="40" @change="$event => one = $event">
        <el-button :type="one ? 'danger' : 'info'">距离顶部 40 像素</el-button>
      </UiAffix>

      <div style="height: 400px" />
    </UiSection>
    <UiSection disabled>
      <div style="height: 1000px" />

      <UiAffix target=".layout-body .el-scrollbar__wrap" :target-duration="300" :offset-bottom="20" @change="$event => two = $event">
        <el-button :type="two ? 'warning' : 'info'">距离底部 20 像素</el-button>
      </UiAffix>
    </UiSection>
  </GwContent>
</template>

<script>
export default {
  name: 'DemoUiAffix',
  data() {
    return {
      one: false,
      two: false
    }
  }
}
</script>
